<template>
  <div :style="'font-size: '+size+'px'">
    <table style="text-align: center;margin: 0 auto">
      <tr>
        <th v-for="col in seatTable.cols+1" :key="col+10" :style="'padding:0 '+size+'px;color: #aaaaaa;'"> {{
            col - 1
          }}
        </th>
      </tr>
      <tr v-for="row in seatTable.rows" :key="row+100">
        <th :style="'padding: '+size/10+'px;color: #aaaaaa'">{{ row }}</th>
        <td v-for="col in seatTable.cols" :key="col+1000">
          <el-icon :color="getColor(row,col)" :size="size+5" v-if="getNum(row,col)!=='6'">
            <MilkTea/>
          </el-icon>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import {MilkTea,} from '@element-plus/icons-vue'

const props = defineProps({
  seatTable: {
    type: Object,
    default: {}
  },
  size: {
    type: Number,
    default: 20
  }
})


const getNum = (row: number, col: number) => {
  return props.seatTable.table.charAt((row - 1) * props.seatTable.cols + (col - 1))
}
const getColor = (row: any, col: any) => {
  let num = getNum(row, col)
  if (num == 1) {
    return '#aaaaaa'
  } else if (num == 2) {
    return '#b61c1c'
  }
}
</script>

<style scoped>

</style>